<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令的基本使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
    v-for  实现数据的遍历    数据列表的渲染

-->
<div id="app">
    <h1>{{info}}</h1>
    --------------------通过数组的索引获取数组中的元素-------------------------
    <ul>
        <li>{{usernames[0]}}</li>
        <li>{{usernames[1]}}</li>
        <li>{{usernames[2]}}</li>
    </ul>
    ---------------------v-for实现数组元素的获取------------------------
<!--
        v-for="(username,index) in usernames"
        username     表示数组中的每一个元素   在遍历时 v-for指令会从usernames数组中每次获取一个值存入username
        index       表示数组中元素的索引
        注意：   两个标识符不能交换顺序
-->
    <ul>
        <li v-for="(username,index) in usernames">{{index}}:{{username}}</li>
    </ul>

    ---------------------v-for实现对象中属性值的获取------------------------
<!--
        v-for="(val,attr) in user"
        val    代表遍历的对象中的属性值
        attr   对象中的属性名
        user   遍历的目标对象
        注意：   两个标识符不能交换顺序
-->
    <ul>
        <li v-for="(val,attr) in user">{{attr}}:{{val}}</li>
    </ul>


    ---------------------v-for实现数组的遍历数组中的元素是对象类型的值------------------------
    <br>

    <table border="1px" width="100%" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
       <tr v-for="usr in users">
           <td v-for="val in usr">{{val}}</td>
       </tr>
    </table>

</div>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            info:'v-for 指令的使用',
            usernames:['tom','jack','xiaoming'],
            user:{
                username:'tom',
                age:20,
                sex:'男'
            },
            users:[
                {
                    username:'tom1',
                    age:20,
                    sex:'男'
                },
                {
                    username:'tom2',
                    age:20,
                    sex:'男'
                },
                {
                    username:'tom3',
                    age:20,
                    sex:'男'
                }
            ]
        },
        methods:{

        }
    })
</script>

</body>
</html>
